<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">高度设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo['areaHeight']"
        />
      </el-form-item>
     
      <template v-if="optionsInfo['layoutConfig']">
        <el-form-item label="左侧诊室框高度">
          <el-input-number
            size="small"
            v-model="optionsInfo.layoutConfig.leftBoxHeight"
          />
        </el-form-item>
        <el-form-item label="右侧行高">
          <el-input-number
            size="small"
            v-model="optionsInfo.layoutConfig.rightRowHeight"
          />
        </el-form-item>
      </template>
      <el-form-item label="视图模式" v-if="optionsInfo?.viewModeState">
        <el-select
          v-model="optionsInfo['viewMode']"
          placeholder="请选择"
          @change="handleChangeView"
        >
          <el-option
            v-for="item in viewModeOPtions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <template v-if="optionsInfo['currentPatientArea']">
        <div class="title-info">
          <el-divider content-position="left">窗口名称</el-divider>
        </div>
        <el-form-item class="replenish-shown" label="窗口字号">
          <el-input-number
            :min="1"
            size="small"
            v-model="optionsInfo['windowNameSize']"
          />
        </el-form-item>
      </template>

      <!--滚动设置-->

      <!--正在就诊-->
      <template v-if="optionsInfo['viewMode']">
        <div class="list-item-setting" v-if="optionsInfo['currentPatientArea']">
          <div class="title-info">
            <el-divider content-position="left">左侧区域设置</el-divider>
          </div>
          <el-form-item class="replenish-shown" label="就诊标题(无值时显示诊室号)">
            <el-input
              v-model="optionsInfo['currentPatientTitle']"
              placeholder="请输入内容"
              size="small"
            />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['currentPatientWrpColor']"
            />
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number
              v-model="optionsInfo['currentPatientWrpFontSize']"
              size="small"
              class="hide-spin-button"
            />
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number
              v-model="optionsInfo['currentPatientWrpWidth']"
              size="small"
              class="hide-spin-button"
            />
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number
              v-model="optionsInfo['currentPatientWrpHeight']"
              size="small"
              class="hide-spin-button"
            />
          </el-form-item>
          <!-- <el-form-item label="圆角">
            <el-input-number
              v-model="optionsInfo['currentPatientWrpRadius']"
              size="small"
              class="hide-spin-button"
            />
          </el-form-item> -->
          <el-form-item label="背景类型" class="replenish-shown">
            <el-select
              v-model="optionsInfo['currentPatientWrpBgType']"
              @change="handleChangeCurrentPatientWrpBgType"
              placeholder="请选择"
            >
              <el-option label="渐变" value="liner" />
              <el-option label="纯色" value="color" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="渐变样式"
            class="replenish-shown"
            v-if="optionsInfo['currentPatientWrpBgType'] === 'liner'"
          >
            <el-select
              v-model="optionsInfo['currentPatientWrpLinerClass']"
              placeholder="请选择"
            >
              <el-option label="样式一" value="liner-1" />
              <el-option label="样式二" value="liner-2" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="optionsInfo['currentPatientWrpBgType'] === 'color'"
            label="背景色"
            class="replenish-shown"
          >
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['currentPatientWrpBackground']"
            />
          </el-form-item>
        </div>
      </template>
      <template v-if="optionsInfo['layerNameKey'] === 'call-patient-blood'">
        <div class="list-item-setting">
          <div class="title-info">
            <el-divider content-position="left">弹层信息</el-divider>
          </div>
          <el-select
            v-model="optionsInfo['layerNameKey']"
            placeholder="请选择"
            size="medium"
          >
            <el-option
              v-for="item in layerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div
          class="setting"
          
        >
          <el-divider content-position="left">呼叫患者弹层显示</el-divider>
          <el-form-item label="设置显示" class="wait-patient-set">
            <el-radio-group v-model="optionsInfo.checkList">
              <el-radio
                :label="item.value"
                v-for="item in callPatientOptions"
                :key="item.value"
              >
                <template>
                  {{ item.label }}
                  <el-tooltip
                    class="item"
                    effect="dark"
                    placement="bottom"
                    content="当是叫号器登陆的时候，该属性生效"
                    v-if="item.value == 4"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </template>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="显示内容"
            class="column-area"
            v-if="optionsInfo.checkList === 5"
          >
            <el-input
              class="hide-spin-button"
              v-model="optionsInfo.layerInfo.current.content"
            />
          </el-form-item>
          <el-divider content-position="left">弹层顶部设置</el-divider>
          <el-form-item label="背景色" class="column-area">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['layerInfo']['current'].backgroundColor"
            />
          </el-form-item>
          <el-form-item label="字体颜色" class="column-area">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['layerInfo']['current'].color"
            />
          </el-form-item>

          <el-form-item label="字体大小" class="column-area">
            <el-input-number
              :min="14"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo['layerInfo']['current'].fontSize"
            />
          </el-form-item>
    
        </div>
        </div>
      </template>
    </div>
    <!--选择图片的弹层-->
    <SelectPicture
      :info="PictureInfo.info"
      :visible="PictureInfo.visible"
      @handleSure="handleSure"
      @handleCancel="handleCancel"
    />
  </div>
</template>

<script>
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
import updatePicture from "@c/public/layer/template/updatePicture/index.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "windowCurrentNxConfig-editor",
  componentName: "windowCurrentNxConfig-editor",
  mixins: [],
  components: {
    SelectPicture,
    updatePicture,
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      optionsInfo: Object(),
      predefineColors: types["predefineColors"],
      fontWeightOptions: types["fontWeightOptions"],
      updateImg: "",
      PictureInfo: {
        visible: false,
        info: 1,
      },
      windowOptions: [
        {
          value: "deptName",
          label: "科室名称",
        },
        {
          value: "deptShortName",
          label: "科室简称",
        },
        {
          value: "roomName",
          label: "诊室名称",
        },
        {
          value: "roomShortName",
          label: "诊室简称",
        },
        {
          value: "roomNo",
          label: "诊室号",
        },
      ],
      layerOptions: [
        {
          value: "call-patient-blood",
          label: "宁夏弹窗",
        },
        {
          value: "none",
          label: "无弹窗",
        },
      ],
      viewModeOPtions: [
        {
          value: 1,
          label: "视图一",
        },
        {
          value: 2,
          label: "视图二",
        },
      ],
      callPatientOptions: [
        {
          value: 1,
          label: "科室",
        },
        {
          value: 2,
          label: "号别",
        },
        {
          value: 3,
          label: "诊室",
        },
        // {
        //   value: 4,
        //   label: "医生工作站",
        // },
        {
          value: 5,
          label: "自定义",
        },
      ],
      ApiTypeOptions: [
        {
          value: 1,
          label: "接口地址",
        },
        {
          value: 2,
          label: "接口标识",
        },
      ],
      apiMethodOptions: [
        {
          value: 1,
          label: "GET",
        },
        {
          value: 2,
          label: "POST",
        },
      ],
    };
  },

  computed: {
    getRoomNumberSelected() {
      let { roomNumberSelected = true } = this.optionsInfo;
      return roomNumberSelected;
    },
  },

  methods: {
    handleChangeView(val) {
      switch (val) {
        case 1:
          Reflect.set(this.optionsInfo, "roomNameFontSize", 150);
          break;
        case 2:
          Reflect.set(this.optionsInfo, "roomNameFontSize", 320);
          break;
      }
    },

    // 计算候诊患者
    handleTotal() {
      let { patientListRow = 5, patientListCol = 3 } = this.optionsInfo;
      this.optionsInfo.waitPatientNumber = patientListRow * patientListCol;
    },
    handleChangeBgType(val) {
      switch (val) {
        case "liner":
          Reflect.set(this.optionsInfo, "roomLinerClass", "");
          Reflect.set(this.optionsInfo, "roomNameBackground", "");
          break;
        case "color":
          Reflect.set(this.optionsInfo, "roomLinerClass", "");
          break;
      }
    },
    handleChangeCurrentPatientWrpBgType(val) {
      switch (val) {
        case "liner":
          Reflect.set(this.optionsInfo, "currentPatientWrpLinerClass", "");
          Reflect.set(this.optionsInfo, "currentPatientWrpBackground", "");
          break;
        case "color":
          Reflect.set(this.optionsInfo, "currentPatientWrpLinerClass", "");
          break;
      }
    },
    // 选择图片
    handleSelect(value, content) {
      let info = Object();
      switch (value) {
        case "logoUrl":
          this.updateImg = value;
          let { logoUrl } = this.optionsInfo;
          Reflect.set(info, "type", 1);
          Reflect.set(info, "content", logoUrl);
          Reflect.set(this.PictureInfo, "visible", true);
          Reflect.set(this.PictureInfo, "info", info);
          break;
        default:
          this.updateImg = "Logo";
          let { imageUrl } = this.optionsInfo;
          Reflect.set(info, "content", imageUrl);
      }
    },
    // 取消弹层
    handleCancel() {
      Reflect.set(this.PictureInfo, "visible", false);
    },

    handleSure(value, content) {
      const self = this;
      console.log(value);
      console.log(content);
      console.log(this.updateImg);
      let { key, val } = value;

      switch (this.updateImg) {
        case "logoUrl":
          Reflect.set(this.optionsInfo, "logoUrl", value.val.url);
          break;
        default:
          Reflect.set(this.optionsInfo, "imageUrl", value.val.val);
      }
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = val.config;
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
.el-upload {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  cursor: pointer;
  line-height: 80px;
  vertical-align: top;
  &:hover {
    border-color: #409eff;
    color: #409eff;
  }

  .el-icon-plus {
    // font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.45);
  }
}
.replenish-shown {
  display: flex;
  flex-direction: column;

  :deep(label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    .el-input-number {
      flex-shrink: 1;
      width: 150px;
    }

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }
  }
}
</style>
